<template>
  <div class="body">
    <div class="Basic">
      <span>基本信息</span>
    </div>
    <div class="ChineseName">
      <span class="red">*</span>
      <span class="Name">中文姓名</span>
      <input v-model="form.name" placeholder="與身份證件壹致">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">*</span>
      <span class="Name">英文姓名</span>
      <input v-model="form.en_name" placeholder="與身份證件壹致">
    </div>
    <div class="gray"></div>
    <div class="ChineseName flex-box">
      <div class="sex-box">
        <span class="chin">性别</span>
        <select v-model="form.gender" id="sexuality">
          <option value="1">男</option>
          <option value="2">女</option>
        </select>
      </div>
      <div class="res-box">
        <span class="bar">|</span>
        <span class="residents">是否是永久居民</span>
        <select  id="sexua" v-model="form.ispr">
          <option value="1">是</option>
          <option value="0">否</option>
        </select>
      </div>
    </div>
    <div class="gray"></div>
    <div class="ChineseName birth btn">
      <span class="Name chin">出生日期</span>
      <!-- <span id="result" class="mui-btn mui-btn-block">{{form.birth}}</span> -->
      <!-- <am-timepicker labelPlacement="append" color="primary" v-model="form.birth"></am-timepicker> -->
      <am-input type="date" v-model="form.birth" placeholder="YY/MM/DD"></am-input>
      <!-- <span class="mopic btn"></span> -->
    </div>
    <div class="gray"></div>
    <div class="ChineseName bb">
      <span class="red">*</span>
      <span class="Name">手机号</span>
      <input v-model="form.phone" placeholder="輸入輸入手機號">
    </div>
    <div class="gray"></div>
    <div class="ChineseName aa">
      <span class="red">*</span>
      <span class="Name">電郵</span>
      <input v-model="form.email" placeholder="輸入電子郵件">
    </div>
    <div class="gray"></div>
    <div class="ChineseName aa">
      <span class="red">*</span>
      <span class="Name">住宅資料</span>
      <input v-model="form.street" placeholder="輸入大廈名稱">
    </div>
    <div class="gray"></div>
    <div class="butto">
      <button type="button" @click="last()">下一步</button>
    </div>
  </div>
</template>

<script>
// TODO: 新增字段名：住宅資料？ (address)
import { getInfoBySession, userUpdate } from '@/api/login'
export default {
  name: 'UserInfo',
  data () {
    return {
      options: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ],
      resOptions: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      form: {
        name: '',
        en_name: '',
        gender: '1',
        ispr: '1',
        birth: '',
        phone: '',
        email: '',
        street: ''
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    // TODO: 日期組件
    isNumber (val) {
      var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },
    loadData () {
      getInfoBySession().then(res => {
        if (res.code === 1) {
          this.form = res.data
        // this.form.unionid = uni
        } else {
          alert(res.msg)
          this.$router.push('/login')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    last () {
      if (!this.isNumber(this.form.phone) || this.form.name == null || this.form.name === '' || this.form.en_name == null || this.form.en_name === '' || this.form.phone == null || this.form.phone == null || this.form.email == null || this.form.email === '' || this.form.street == null || this.form.street === '') {
        alert('請檢查手機號格式和帶*號的必填項，請修正填寫后提交~')
        console.log('請檢查手機號格式和帶*號的必填項，請修正填寫后提交~')
      } else {
        userUpdate(this.form).then(res => {
          if (res.code === 1) {
            if (this.$route.query.sid) {
              this.$router.push('/know_you?sid=' + this.$route.query.sid)
            } else {
              this.$router.push('/know_you')
            }
          } else {
            alert(JSON.stringify(res))
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style type="text/css" scoped>
/* @import '../style/css/mui.picker.min.css'; */
* {
  margin: 0;
  padding: 0;
}

.body {
  background: rgb(250, 249, 247);
  font-family: PingFang SC;
}
.am-form-field {
  width: 60%;
  display: inline-block;
  position: relative;
  /* bottom: 50px; */
  /* left: 100px; */
}
.Basic {
  line-height: 40px;
  height: 40px;
  color: rgba(160, 160, 160, 1);
  background: rgba(250, 249, 247, 1);
}

.Basic span {
  margin-left: 16px;
}

.ChineseName {
  height: 50px;
  line-height: 50px;
  background: rgb(255, 255, 255);
}
.red {
  margin-left: 6px;
  color: red;
  width: 7px;
  height: 20px;
  font-size: 14px;
}

.Name {
  margin-left: -2px;
  font-size: 15px;
}

.ChineseName input {
  margin-left: 12px;
  border: 0px;
  height: 21px;
  font-size: 15px;
  outline: none;
}

.gray {
  width: 344px;
  height: 1px;
  background: rgba(245, 245, 245, 1);
  opacity: 1;
}
select {
  border-radius: 3px;
}
.flex-box {
  display: flex;
  width:100%;
  justify-content: space-between;
}
.flex-box div {
  margin-right: 0;
}
.sex-box, .res-box {
  width: 50%;
}
#sexuality {
  display: inline;
  color: rgb(160, 160, 160);
  background: rgb(255, 255, 255);
  border: none;
  margin-left: 30px;
  font-size: 15px;
  height: 21px;
  outline: none;
}

.butto {
  width: 74.67%;
  margin: 32px auto auto auto;
  height: 44px;
}

.butto button {
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
  font-size: 16px;
  width: 100%;
  border: solid 1px rgba(249, 119, 130, 1);
  border-radius: 30px;
  height: 44px;
  background: rgb(240, 118, 110);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  /* background: rgba(249, 119, 130, 1); */
  box-shadow: 0px 3px 6px rgba(249, 119, 130, 0.4);
  border-radius: 54px;
  outline: none;
}

.chin {
  margin-left: 17px;
}

.aa input {
  margin-left: 42px;
}

.bb input {
  margin-left: 27px;
}

#sexua {
  margin-left: 1px;
  background: rgb(255, 255, 255);
  color: rgb(160, 160, 160);
  border: none;
  font-size: 15px;
  height: 21px;
  outline: none;
}

.bar {
  color: rgb(204, 204, 204);
  margin-right: 2px;
}

.residents {
  font-size: 15px;
  color: rgba(22, 22, 22, 1);
}

.mopic {
  margin: 20px 18px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.mui-btn {
  font-size: 16px;
}

#result {
  width: 200px !important;
  display: inline-block;
}
</style>
